<script setup lang="ts">
import {reactive, inject, provide, ref} from 'vue'
import {Toast} from 'vant'
import {updateEduEx} from '@/api/Resume'

const {closeChange} = inject('popup') as any
const state: any = reactive({
  showEducation: false,
  showStartTime: false,
  showEndTime: false,
  minDate: new Date(1990, 1, 1),
  maxDate: new Date()
})
const props = defineProps({
  eduEx: {
    type: Object as any
  }
})
const eduEx = ref<any>({
  startTime: "",
  endTime: "",
  schoolName: "",
})

const setInfo = () => {
  if (props.eduEx) {
    eduEx.value = props.eduEx
  }
}
setInfo()

const actions = reactive<any>([
  {name: "博士"},
  {name: "硕士"},
  {name: "本科"},
  {name: "专科"},
  {name: "中专"},
  {name: "高中"},
])

const educationSelect = (value: any) => {
  eduEx.value.education = value.name
}
const closePositionType = (name: any) => {
  if (name) state.positionValue = name
  state.showPositionType = false
}
const closeServiceType = (name: any) => {
  if (name) state.serviceValue = name
  state.showServiceType = false
}
const startTimeConfirm = (value: any) => {
  eduEx.value.startTime = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate()
  state.showStartTime = false
}
const endTimeConfirm = (value: any) => {
  eduEx.value.endTime = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate()
  state.showEndTime = false
}
const submit = async () => {
  updateEduEx(eduEx.value).then(res => {
    Toast(res.msg)
  })
}
provide('popup', {
  closePositionType,
  closeServiceType
})
</script>
<template>
  <van-nav-bar title="教育经历" left-arrow @click-left="closeChange"/>
  <div class="position-list">
    <div class="user-item">
      <h5>学校名称</h5>
      <van-field v-model="eduEx.schoolName" label="" placeholder="请填写您的学校名称"/>
    </div>
    <div class="user-item">
      <h5>学历</h5>
      <van-field v-model="eduEx.education" label="" placeholder="请选择您的学历"
                 readonly
                 is-link
                 @click="state.showEducation = true"/>
      <van-action-sheet
          v-model:show="state.showEducation"
          :actions="actions"
          cancel-text="取消"
          close-on-click-action
          @cancel="state.showEducation=false"
          @select="educationSelect"
      />
    </div>
    <div class="user-item">
      <h5>专业</h5>
      <van-field v-model="eduEx.major" label="" placeholder="请填写您的专业"/>
    </div>
    <div class="user-item">
      <h5>就读时间</h5>
      <div class="work-time-list">
        <van-field v-model="eduEx.startTime" readonly label="" placeholder="请选择"
                   @click="state.showStartTime=true"/>
        <span></span>
        <van-field v-model="eduEx.endTime" readonly label="" placeholder="请选择"
                   @click="state.showEndTime=true"/>
      </div>
      <van-action-sheet v-model:show="state.showStartTime">
        <van-datetime-picker
            type="date"
            title="选择年月日"
            :min-date="state.minDate"
            :max-date="state.maxDate"
            @confirm="startTimeConfirm"
            @cancel="state.showStartTime=false"
        />
      </van-action-sheet>
      <van-action-sheet v-model:show="state.showEndTime">
        <van-datetime-picker
            type="date"
            title="选择年月日"
            :min-date="state.minDate"
            :max-date="state.maxDate"
            @confirm="endTimeConfirm"
            @cancel="state.showEndTime=false"
        />
      </van-action-sheet>
    </div>
    <button class="wy-submit" @click="submit">保存</button>

  </div>
</template>
<style scoped>
.position-list {
  margin: 1.52rem 0.67rem 0;
}

.work-time-list {
  display: flex;
  align-items: center
}

.work-time-list span {
  width: 0.83rem;
  height: 0.05rem;
  margin-right: 2.4rem;
  background: #333333;
}

.work-time-list .van-cell {
  width: 6rem;
}

.resume-label h5 {
  margin-bottom: 0;
}
</style>